@charset "utf-8";
*{
	/*字体简写属性*/
	font:16px "微软雅黑";
	text-decoration: none;
	list-style-type: none;
	margin:0;
	padding:0;
}
 #father{
	 /*浮动卡住：第一步，父元素宽度 498px*/
	  width:499px;
	  /*塌陷解决方案1：加高 经验*/
	  height:200px;
	  /*塌陷解决方案2：加溢出，子浮动元素算溢出  推荐*/
	  overflow: hidden;
	  border:10px solid red;
  }
  /*网页“选择器权值问题”，如果不够，给一个选择器添加效果
  协同给几个元素添加效果
  群组选择器，不同元素，统一添加效果
  */
 div.d1,div.d2,div.d3,div.d4,div.d5{
	 width:100px;
	 height:100px;
	 background:#ffff00 ;
	 /*浮动一定产生问题*/
	 float:left;
	 font-size: 2em;
	 text-align: center;
	 line-height: 100px;
 }
 
 div#father div.d1{
	 background: #ffff00;
	  /*浮动卡住：第二步，d1高度 130px*/
	  height:130px;
 }
 div#father div.d2{
 	 background: #00ffff;
 }
 div#father div.d3{
 	 background:#ffaa7f;
 }
 div#father div.d4{
 	 background:#55aaff ;
 }
 div#father div.d5{
 	 background: #ff00ff;
	 /*清除浮动，解决浮动卡住问题：纵向还是横向*/
	 clear:both;
 }



	

  